<template>
  <section class="todoapp">
    <todo-header @add="handleAdd"></todo-header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <todo-main
      :list="list2"
      @del="handleDel"
      @update="handleUpdate"
      :isAllDone="isAllDone"
      @changeAllDom="(val) => (isAllDone = val)"
    ></todo-main>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <todo-footer
      :residue="residue"
      @clearCompleted="clearCompleted"
      :flag="flag"
      @changeFlag="changeFlag"
    ></todo-footer>
  </section>
</template>

<script>
import TodoHeader from "@/components/todo/components/TodoHeader.vue";
import TodoMain from "@/components/todo/components/TodoMain.vue";
import TodoFooter from "@/components/todo/components/TodoFooter.vue";
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      list: [
        { id: 12, name: "吃饭", isDone: false },
        { id: 14, name: "听歌", isDone: true },
        { id: 23, name: "洗澡", isDone: true },
        { id: 34, name: "睡觉", isDone: false },
        { id: 35, name: "游戏", isDone: false },
      ],
      list2Data: [],
      // list: JSON.parse(localStorage.getItem("todoList")) || [],
      flag: "all",
      apply: true,
    };
  },
  computed: {
    residue() {
      return this.list.filter((item) => item.isDone === false).length;
    },
    list2() {
      if (!this.apply) return this.list2Data;
      if (this.flag == "all") {
        this.apply = false;
        console.log(this.apply);
        this.list2Data = this.list;
        return this.list2Data;
      } else if (this.flag == "active") {
        this.apply = false;
        console.log(this.apply);
        this.list2Data = this.list.filter((item) => item.isDone === false);
        return this.list2Data;
      } else if (this.flag == "completed") {
        this.apply = false;
        console.log(this.apply);
        this.list2Data = this.list.filter((item) => item.isDone);
        return this.list2Data;
      }
    },
    isAllDone: {
      get() {
        return this.list.every((item) => item.isDone);
      },
      set(val) {
        console.log(val);
        this.list.forEach((item) => (item.isDone = val));
      },
    },
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        localStorage.setItem("todoList", JSON.stringify(newValue));
      },
    },
  },
  methods: {
    handleAdd(val) {
      // console.log(val);
      let listMaxId = Math.max(...this.list.map((item) => item.id)) + 1;
      this.list.push({
        id: listMaxId == "-Infinity" ? 1 : listMaxId,
        name: val,
        isDone: false,
      });
      console.log(this.list);
    },
    handleDel(val) {
      // console.log(val);
      this.list = this.list.filter((item) => item.id != val);
    },
    handleUpdate(val) {
      console.log(val);
      let res = this.list.find((item) => item.id == val);
      res.isDone = !res.isDone;
    },
    clearCompleted() {
      console.log(111);
      this.list = this.list.filter((item) => item.isDone === false);
    },
    changeFlag(val) {
      console.log(val);
      this.flag = val;
      this.apply = true;
      console.log(this.apply);
    },
  },
};
</script>

<style></style>
